<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link href="/css/jquery-select/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
<style>
	#box{
		width: 600px;height: 600px;
		padding-top: 5rem;
		margin-left: 4rem;
	}
</style>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight" style="padding: 47px;">
		<div class="col-sm-12">
			<div class="ibox">
				<div class="ibox-body">
					<div class="fixed-table-toolbar">
						<div class="columns pull-right" role="group">
							<button class="btn btn-success" onclick="getData2()">
								<i class="fa fa-search" aria-hidden="true"></i>查询
							</button>
							<!--<button class="btn btn-danger" shiro:hasPermission="commanderList:manage:export" onclick="exportCommander()">-->
								<!--<i class="fa fa-mail-reply-all" aria-hidden="true"></i>导出-->
							<!--</button>-->
						</div>
						<input type="hidden" name="defCentreId" id="defCentreId" th:value="${centreId}">
						<input type="hidden" name="flag" id="flag" th:value="${flag}">
						<div class="columns pull-left col-md-1 nopadding" th:if="${flag} == '0'">
							<select data-placeholder="商户" class="form-control chosen-select" id="centreId" tabindex="2">
								<option value="" selected="selected">选择商户</option>
								<option th:each="item: ${centreList}" th:text="${item.name}" th:value="${item.centreId}"></option>
							</select>
						</div>
						<div class="pull-left search nopadding" style="size: 40%">
							<input type="text" class="laydate-icon form-control" placeholder="请选择统计时间"
											   id="statisTime" name="statisTime"
											   onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"
											   style="background-color: #fff;" readonly="readonly"/>
						</div>
						<!--<div class="pull-left search nopadding" style="size: 40%">-->
							<!--<input type="text" class="laydate-icon form-control" placeholder="请选择结束时间"-->
											   <!--id="endDate" name="endDate"-->
											   <!--onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"-->
											   <!--style="background-color: #fff;" readonly="readonly"/>-->
						<!--</div>-->
						
						<div class="columns pull-left col-md-1 nopadding" >
							<select data-placeholder="类型" class="form-control chosen-select" id="type" tabindex="2">
								<option  value="">选择</option>
								<option  value="1">日统计</option>
								<option  value="2">周统计</option>
								<option  value="3">月统计</option>
								<option  value="4">年统计</option>
							</select>
						</div>
						
						<!--<div class="pull-left search nopadding" style="size: 30%">-->
							<!--<input id="keyword" name="keyword" type="text" class="form-control" placeholder="姓名/联系电话/桌名/订单号">-->
						<!--</div>-->
						<!--<input type="hidden" id="centreId" th:value="${centreId}" th:if="${flag} == '1'">-->
						<!--<div class="columns pull-left col-md-1 nopadding" th:if="${flag} == '0'">-->
							<!--<select data-placeholder="商户" class="form-control chosen-select" id="centreId" tabindex="2">-->
								<!--<option value="" selected="selected">选择商户</option>-->
								<!--<option th:each="item: ${centreList}" th:text="${item.name}" th:value="${item.centreId}"></option>-->
							<!--</select>-->
						<!--</div>-->
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="box"></div>
	<div th:include="include :: footer"></div>
	<!--<script type="text/javascript" src="/js/appjs/cashier/order/manage/cashierOrder.js"></script>-->
	<!--<script src="/js/jquery-select/jquery.searchableSelect.js"></script>-->

	<script src="/js/echarts/echarts.min.js"></script>

	<script>
		//初始化ehcharts实例
		var myChart=echarts.init(document.getElementById("box"));
		function getData2(){
			var flag=$('#flag').val();
			var statisTimeQuery=$('#statisTime').val()?$('#statisTime').val():"";
			var typeQuery=$('#type').val()?$('#type').val():"1";//默认当日销量
			var centreId=$('#centreId').val();;
			if(flag=='0' && !centreId){
				layer.msg("请选择商户");
				return;
			}
			if(flag=='1'){
				centreId=$('#defCentreId').val();
			}
			$.ajax({
				url: "/cashier/order/manage/orderStatis?statisTime="+statisTimeQuery+"&type="+typeQuery+"&centreId="+centreId,
				type: "GET",
				// params: {
				// 	'statisTime': $("statisTime").val(),
				// 	'type': $("type").val(),
				// 	'centreId': $("centreId").val(),
				// },
				success: function (r) {
					if (r.code == 0) {
						//指定图表的配置项和数据
						var option={
							//标题
							title:{
								text:'生鲜销量统计'
							},
							//工具箱
							//保存图片
							toolbox:{
								show:true,
								feature:{
									saveAsImage:{
										show:true
									}
								}
							},
							tooltip:{
								// trigger: 'item',
								trigger: 'axis',
								axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985'
									}
								}

							},
							//图例-每一条数据的名字叫销量
							legend:{
								data:[]
							},
							//x轴
							xAxis:{
								data:[]
							},
							//y轴没有显式设置，根据值自动生成y轴
							yAxis:{},
							//数据-data是最终要显示的数据
							series:[{
								name:'',
								type:'line',
								areaStyle: {
									normal: {color: '#80ffc0'}
								},
								data:[]
							}]
						};
						var type=$("#type").val();
						var suffix="";
						var prefix="";
						if(type==2){
							option.title.text="收银系统周销量";
							suffix="";
							prefix="星期";
						}else if(type==3){
							option.title.text="收银系统月销量";
							suffix="日";
							prefix="";
						}else if(type==4){
							option.title.text="收银系统年销量";
							suffix="月份";
							prefix="";
						}else{
							option.title.text="收银系统日销量";
							suffix="时";
							prefix="";
						}
						var valueArr=[];
						var nameArr=[];
						for(var i=0;i<r.data.statisTableList.length;i++){
							console.log(r.data.statisTableList[i]);
							nameArr.push(prefix+r.data.statisTableList[i].name+suffix);
							valueArr.push(r.data.statisTableList[i].price);
						}
						option.xAxis.data=nameArr;
						option.series[0].data=valueArr;
						option.legend.data[0]=r.data.centreName;
						//使用刚刚指定的配置项和数据项显示图表
						myChart.setOption(option);
					} else {
						layer.msg(r.msg);
					}
				}
			});
		}
	</script>
	<script type="text/javascript">
		$(function(){
			// $('select').searchableSelect();
			if($('#flag').val()=='1') {
				getData2();
			}
		});
	</script>
</body>
</html>